<!--
 * @Author: your name
 * @Date: 2021-11-12 10:24:16
 * @LastEditTime: 2021-11-19 15:47:29
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \gwcloud-ui\src\page\wel.vue
-->
<template>
  <div>
    <!-- 顶部 -->
    <div class="banner-text the_top">
      <div class="top_item">
        <div class="fulfilled col_item">
          <div>用户数</div>
          <div>日</div>
        </div>
        <div class="number col_item">
          <div>21</div>
          <div>
            <i class="icon-gwyonghu"></i>
          </div>
        </div>
        <div class="device col_item">
          <div>用户总数</div>
          <div>23</div>
        </div>
      </div>
      <div class="top_item">
        <div class="fulfilled line col_item">
          <div>登陆IV</div>
          <div>日</div>
        </div>
        <div class="number col_item">
          <div>21</div>
          <div>
            <i class="icon-gwshenfen"></i>
          </div>
        </div>
        <div class="device col_item">
          <div>总登陆IV</div>
          <div>23</div>
        </div>
      </div>
      <div class="top_item">
        <div class="fulfilled defect col_item">
          <div>登陆PV</div>
          <div>日</div>
        </div>
        <div class="number col_item">
          <div>21</div>
          <div>
            <i class="icon-gwpvtzyunjiexiPrivateZone"></i>
          </div>
        </div>
        <div class="device col_item">
          <div>总登陆PV</div>
          <div>23</div>
        </div>
      </div>
      <div class="top_item">
        <div class="fulfilled day col_item">
          <div>页面访问PV</div>
          <div>日</div>
        </div>
        <div class="number col_item">
          <div>21</div>
          <div>
            <i class="icon-gwziyuan"></i>
          </div>
        </div>
        <div class="device col_item">
          <div>总页面访问PV</div>
          <div>23</div>
        </div>
      </div>
      <div class="top_item last_top_item">
        <div class="fulfilled attendant col_item">
          <div>应用数量</div>
          <div>日</div>
        </div>
        <div class="number col_item">
          <div>21</div>
          <div>
            <i class="icon-gwyingyongshangdian"></i>
          </div>
        </div>
        <div class="device col_item">
          <div>到期应用</div>
          <div>23</div>
        </div>
      </div>
    </div>
    <!-- 最近十天访问记录 -->
    <div class="repairs">
      <div class="repairs_tle">
        最近十天访问记录 
        <!-- <i class="icon-ziyuan"></i> -->
      </div>
      <div id="workOrder">

      </div>
    </div>
    <!-- 底部 -->
    <div class="the_base">
      <div class="repairs base_repairs">
        <div class="repairs_tle">
          访问用户浏览器 
        </div>
        <div id="userBrowser"></div>
      </div>
      
      <div class="repairs base_repairs">
        <div class="repairs_tle">
          访问用户操作系统 
        </div>
        <div id="userSystem"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import echarts from 'echarts'
import { RepairworkOrder,Usersreach } from '@/util/echartsAll'
export default {
  name: "Wel",
  data() {
    return {
      activeNames: ["1", "2", "3", "4"],
      DATA: [],
      text: "",
      actor: "",
      count: 0,
      isText: false,
      browserColor:[ '#56a1d5', '#87dde1', '#fadb71','#f2a385'],
      browserData:[
          { value: 1048, name: 'Chrome' },
          { value: 735, name: 'Firefox' },
          { value: 580, name: 'Microsoft Edge' },
          { value: 484, name: 'Safari' }
        ],
        SystemColor:[ '#56a1d5', '#62c3e5', '#aee4bb','#fadb71', '#f2a385', '#ea7a94','#e0beef'],
      SystemData:[
          { value: 1048, name: 'Android' },
          { value: 735, name: 'Linux' },
          { value: 580, name: 'Mac OS X' },
          { value: 484, name: 'Ubuntu' },
          { value: 735, name: 'Windows 10' },
          { value: 580, name: 'Windows 7' },
          { value: 484, name: 'Windows 8' }
        ]
    };
  },
  computed: {
    ...mapGetters(["website"]),
  },
  mounted(){
    this.get()
  },
  methods: {
    getData() {
      if (this.count < this.DATA.length - 1) {
        this.count++;
      } else {
        this.count = 0;
      }
      this.isText = true;
      this.actor = this.DATA[this.count];
    },
    get(){
        const mycharts = echarts.init(document.getElementById('workOrder'))
        RepairworkOrder(mycharts, [], [], [])


        const userBrowser = echarts.init(document.getElementById('userBrowser'))
        Usersreach(userBrowser, this.browserData, this.browserColor,'访问用户浏览器')
        const userSystem = echarts.init(document.getElementById('userSystem'))
        Usersreach(userSystem, this.SystemData, this.SystemColor,'访问用户操作系统')
        
    },
    setData() {
      let num = 0;
      let count = 0;
      let active = false;
      const timeoutstart = 5000;
      const timeoutend = 1000;
      const timespeed = 10;
      setInterval(() => {
        if (this.isText) {
          if (count == this.actor.length) {
            active = true;
          } else {
            active = false;
          }
          if (active) {
            num--;
            this.text = this.actor.substr(0, num);
            if (num == 0) {
              this.isText = false;
              setTimeout(() => {
                count = 0;
                this.getData();
              }, timeoutend);
            }
          } else {
            num++;
            this.text = this.actor.substr(0, num);
            if (num == this.actor.length) {
              this.isText = false;
              setTimeout(() => {
                this.isText = true;
                count = this.actor.length;
              }, timeoutstart);
            }
          }
        }
      }, timespeed);
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
::v-deep .avue-tags{
  display: none !important;
}
@mixin top_icon($color1,$color2) {
        width: 28px;
        height: 22px;
        line-height: 18px;
        border-radius: 4px;
        font-size: 14px;
        text-align: center;
        color: $color1;
        background-color: $color2;
        border: 1px solid $color2;
}
.banner-text {
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  background: #fff;
  .top_item {
    width: 20%;
    border-right: 1px solid #e6e6ee;
    padding: 10px 0px 15px 0px;
    box-sizing: border-box;
    .col_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #87888a;
      padding: 0 20px;
      box-sizing: border-box;
    }
    .fulfilled {
      font-size: 14px;
      border-bottom: 1px solid #e6e6e6;
      padding-bottom: 10px;
      box-sizing: border-box;
      :last-child{
        @include top_icon(#389E0D,#6DBEF8);
      }
    }
    .line{
      :last-child{
        @include top_icon(#f284ef,#fbd3f8);
      }
    }
    .day{
      :last-child{
        @include top_icon(#38a980,#adde91);
      }
    }
    .attendant{
      :last-child{
        @include top_icon(#5773e0,#cacaf3);
      }
    }
    .defect{
      :last-child{
        @include top_icon(#ff9502,#ffd59a);
      }
    }
    .number {
      padding: 33px 20px 23px 20px;
      :first-child{
        font-size: 24px;
        color: #282828;
      }
      :last-child{
        font-size: 50px;
      }
    }
    .device {
      font-size: 14px;
      :last-child{
        color: #282828;
      }
    }
  }
  .last_top_item {
    border: none;
  }
}
// 
.repairs{
  background: #ffffff;
  margin-top: 20px;
  border-radius: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  .repairs_tle{
    padding: 8px 0;
    color: #87888A;
    font-size: 14px;
    border-bottom: 1px solid #e6e6ee;
    padding-left: 20px;
    margin-bottom: 12px;
  }
  #workOrder{
    height: 328px;
    width: 100%;
  }
}
.the_base{
  display: flex;
  justify-content: space-between;
  width: 100%;
  .base_repairs{
    width: 49%;
  }
  #userBrowser,#userSystem{
    height: 328px;
    width: 100%;
  }
}
</style>
